<template>
  <div class="m_contentBox">
    <a-card :bordered="false">
      <div class="m_aCardBox">
        <div class="tabBox">
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
              <a-row :gutter="24">
                <a-col :span="6">
                  <a-form-item :label="$t('message.The_name_of_the_role')">
                    <a-input
                      :placeholder="$t('message.Please_enter')"
                      v-model="queryParam.realname"
                    ></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item :label="$t('message.User_Accounts')">
                    <a-input
                      :placeholder="$t('message.Please_enter')"
                      v-model="queryParam.username"
                    ></a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item
                    :label="$t('message.Please_select_the_organization')"
                  >
                    <a-tree-select
                      v-model="queryParam.deptId"
                      style="width: 100%"
                      :placeholder="$t('message.Please_select')"
                      allowClear
                      show-search
                      treeNodeFilterProp="title"
                      tree-default-expand-all
                      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                      :tree-data="treeData"
                    >
                    </a-tree-select>
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <span
                    style="float: right; overflow: hidden"
                    class="table-page-search-submitButtons"
                  >
                    <a-button type="primary" @click="searchQuery">{{
                      $t("message.Search")
                    }}</a-button>
                    <a-button @click="searchReset" style="margin-left: 8px">{{
                      $t("message.Reset")
                    }}</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
        <!-- 查询区域 -->
        <!-- table区域 -->
        <div class="cardBox">
          <div style="margin-bottom: 17px">
            <a-button @click="handleAdd" type="primary" icon="plus">{{
              $t("message.New_user")
            }}</a-button>
          </div>
          <a-table
            ref="table"
            size="middle"
            :scroll="{ x: true }"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            class="j-table-force-nowrap"
            @change="handleTableChange"
          >
            <span slot="action" slot-scope="text, record">
              <a
                type="link"
                size="small"
                icon="edit"
                @click="handleEdit(record)"
                >{{ $t("message.Edit") }}</a
              >
              <a-divider type="vertical" />
              <a-popconfirm
                title="确定删除吗?"
                @confirm="() => handleDelete(record.id)"
                v-if="record.id"
              >
                <a>{{ $t("message.Delete") }}</a>
              </a-popconfirm>
            </span>
          </a-table>
        </div>
        <!-- table区域 -->
        <!-- 用户信息弹窗 -->
        <user-modal ref="modalForm" @ok="modalFormOk"></user-modal>
        <!-- 用户信息弹窗 -->
      </div>
    </a-card>
  </div>
</template>

<script>
import "@/assets/less/TableExpand.less";
import { mixinDevice } from "@/utils/mixin";
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import { getAction } from "@/api/manage";
import UserModal from "./module/userInfo";

export default {
  name: "memberList",
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    UserModal,
  },
  data() {
    return {
      description: "平台组织管理管理页面",
      treeData: [],
      // 表头
      columns: [
        {
          title: this.$t("message.User_name"),
          align: "center",
          dataIndex: "realname",
        },
        {
          title: this.$t("message.User_Accounts"),
          align: "center",
          dataIndex: "username",
        },
        {
          title: this.$t("message.Department_to_which_One_Belongs"),
          align: "center",
          dataIndex: "departName",
        },
        {
          title: this.$t("message.email"),
          align: "center",
          dataIndex: "email",
        },
        {
          title: this.$t("message.Registration_time"),
          align: "center",
          dataIndex: "createTime",
        },
        {
          title: this.$t("message.Handle"),
          dataIndex: "action",
          align: "center",
          fixed: "right",
          width: 147,
          scopedSlots: { customRender: "action" },
        },
      ],
      url: {
        list: "/orgUser/list",
        delete: "/orgUser/delete",
        switch: "/orgUser/switch",
        treeData: "/orgDept/getTree",
      },
      dictOptions: {},
      superFieldList: [],
    };
  },
  created() {
    this.getTreeData();
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG["domianURL"]}/${this.url.importExcelUrl}`;
    },
  },
  methods: {
    handleDefaultBindChange(checked, record) {
      record.defaultBind = checked;
      getAction(this.url.switch, { id: record.id, bind: checked }).then(
        (res) => {
          if (res.success) {
            this.$message.success(this.$t("message.operation_success"));
          } else {
            this.$message.error(res.message);
            record.defaultBind = !checked;
          }
        }
      );
    },
    getTreeData() {
      getAction(this.url.treeData, {}).then((res) => {
        if (res.success) {
          this.treeData = res.result;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .ant-card-body {
  background: #f5f8f7;
}

.tabBox {
  padding: 24px 24px 0;
  background: #ffffff;
  border-radius: 3px;
}

.cardBox {
  margin-top: 24px;
  padding: 24px;
  background: #ffffff;
  border-radius: 3px;
}
</style>
